<script setup>
import { reactive, watch } from 'vue'
const user = reactive({
  name: 'tom',
  info: {
    gender: '男',
    age: 18
  }
})

// 3. 监听响应式对象数据的一个数据，简单类型
// watch(()=>数据, 改变后回调函数)
watch(
  () => user.name,
  (value) => {
    console.log(value)
  }
)

watch(
  () => user.info.age,
  (value) => {
    console.log(value)
  }
)

watch(
  () => user.info,
  (value) => {
    console.log('来了')
  },
  // 开启深度监听
  { deep: true }
)

watch(
  user.info,
  (value) => {
    console.log(value)
  },
  {
    // 已进入去执行一次
    immediate: true
  }
)

// 2s改变数据
setTimeout(() => {
  user.name = 'jack'
}, 2000)

// 4s改变数据
setTimeout(() => {
  user.info.age = 60
}, 4000)

setTimeout(() => {
  user.info.gender = '沃尔玛购物袋'
}, 6000)
</script>

<template>
  <p>姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}</p>
</template>